<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>管理系统</title>
  <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/js/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">

  <link href="${pageContext.request.contextPath}/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/css/style.min.css" rel="stylesheet">
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
  <script>
    <c:if test="${info != null}">
    layer.ready(function(){
      layer.open({
        type: 1,
        area : ["150px", "75px"],
        closeBtn: 0, //不显示关闭按钮
        title : false,
        anim: 6,
        shadeClose: true, //开启遮罩关闭
        time: 2000,
        content:  '<div style="margin: auto; width: 100%; height: 100%" class="alert alert-success" role="alert"><h3 style="text-align: center">${info}</h3></div>',
        success: function () {

        }
      });
    });
    </c:if>
  </script>
  <style>
    input{height: 70px}
  </style>
</head>

<body  data-theme="dark">


<div class="container">
    <div class="row">
      <br>
      <div class="text-center">
        <img src="${pageContext.request.contextPath}/images/modify.png" alt="">
      </div>
      <br>
          <form action="#" method="post" class="form-horizontal" id="form">
            <div class="form-group">
                <label class="col-xs-4 control-label text-right" for="name">姓名:</label>
                <div class="col-xs-7">
                  <input class="form-control text-center" type="text" id="name" name="name" value="${student.name}" disabled>
                  <input class="form-control text-center" type="hidden"  name="name" value="${student.name}">
                </div>
            </div>
            <br>
            <div class="form-group">
              <label class="col-xs-4 control-label text-right" for="sid">学号:</label>
              <div class="col-xs-7">
                <input class="form-control text-center" type="text" id="sid" name="sid" value="${student.sid}" disabled>
                <input class="form-control text-center" type="hidden"  name="sid" value="${student.sid}">
              </div>
            </div>
              <br>
            <div class="form-group">
              <label class="col-xs-4 control-label text-right" for="gander">性别:</label>
              <div class="col-xs-7">
                <input class="form-control text-center" type="text" id="gander" name="gander" value="${student.gander}" disabled>
                <input class="form-control text-center" type="hidden" id="hiddenGander" name="gander" value="${student.gander}">
              </div>
            </div>
              <br>
            <div class="form-group">
              <label class="col-xs-4 control-label text-right" for="idcard">IDCard:</label>
              <div class="col-xs-7">
                <input class="form-control text-center" type="text" id="idcard" name="idcard" value="${student.idcard}" disabled>
                <input class="form-control text-center" type="hidden" id="hiddenIdcard" name="idcard" value="${student.idcard}">
              </div>
            </div>
              <br>
            <div class="form-group">
              <label class="col-xs-4 control-label text-right" for="college">学院:</label>
              <div class="col-xs-7">
                <select class="selectpicker form-control text-center" name="college" id="college" data-with="auto" data-maxwidth="270px" data-width="270px"  onchange="getProfessions()">

                </select>
              </div>
            </div>
            <br>
            <div class="form-group">
              <label class="col-xs-4 control-label text-right" for="clazz">班级:</label>
              <div class="col-xs-7">
                <select class="selectpicker form-control text-center" name="clazz" id="clazz" data-maxwidth="270px" data-width="270px">

                </select>
              </div>
            </div>
            <br>
            <div class="form-group">
              <label class="col-xs-4 control-label text-right" for="email">Email</label>
              <div class="col-xs-7">
                <input class="form-control text-center" type="email" id="email" name="email" value="${student.email}">
              </div>
            </div>
            <br>
            <div class="form-group">
              <button type="button" id="submit" class="btn btn-label btn-warning col-xs-offset-3 col-xs-7"><label><i class="mdi mdi-account-convert"></i></label>确认修改</button>
            </div>
          </form>
    </div>
  </div>

<input type="hidden" id="targetEmail" value="${student.email}">
<input type="hidden" id="targetClazz" value="${student.sid.substring(4, 8)}">
<input type="hidden" id="targetCollege" value="${student.sid.substring(0, 4)}">
<input type="hidden" id="targetProfession" value="${student.profession}">



<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-select/bootstrap-select.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/perfect-scrollbar.min.js"></script>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.min.js"></script>--%>

<script>
   $("#submit").on("click", function () {
     // alert("11")
    var college = $("#college").val();
    var clazz = $("#clazz").val();
    var email = $("#email").val();
    var targetEmail = $("#targetEmail").val();
    var targetClazz = $("#targetClazz").val();
    var targetCollege = $("#targetCollege").val();
   //  alert(college);
   // alert(clazz)
   // alert(email)
     if (college == targetCollege && clazz == targetClazz && email == targetEmail)
    {
      layer.open({
        type: 1,
        area : ["200px", "60px"],
        closeBtn: 0, //不显示关闭按钮
        title : false,
        anim: 6,
        shadeClose: true, //开启遮罩关闭
        time: 2000,
        content:  '<div style="margin: auto; width: 100%; height: 100%" class="alert alert-success" role="alert"><h4 class="text-center">信息并未更改！</h4></div>',
        success: function () {
        }
      });
      return false;
    }
     $.ajax({
       type:"POST",
       url:"${pageContext.request.contextPath}/stu/modify",
       data: $("#form").serialize(),
       dataType:"json",
       complete: function () {
         layer.open({
           type: 1,
           area : ["150px", "75px"],
           closeBtn: 0, //不显示关闭按钮
           title : false,
           anim: 6,
           shadeClose: true, //开启遮罩关闭
           time: 1000,
           content:  '<div style="margin: auto; width: 100%; height: 100%" class="alert alert-success" role="alert"><h4 style="text-align: center">修改成功</h4></div>'
         });
         setTimeout(function ()  {
           parent.location.reload(); // 父页面刷新
           var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
           parent.layer.close(index);
         }, 1000)

       }
     });

   });
</script>

<script>
  $(function ($) {
    $.ajax({
       url: "${pageContext.request.contextPath}/info/getColleges",
       data: {},
       dataType: "json",
       success: function (data) {
         var target = "";
         for (var pro in data) {
           console.log(data[pro])
           if (data[pro]["college"] != "${student.college}") {
             target += '<option value="' + data[pro]["collegeId"] + '">' + data[pro]["college"] + '</option>\r\n'
           }
           if (data[pro]["college"] == "${student.college}") {
             target += '<option selected value="'+ data[pro]["collegeId"] +'">'+ data[pro]["college"] +'</option>\r\n'
           }
         }
         var college = $("#college");
         $.ajax({
           url: "${pageContext.request.contextPath}/info/getProfessions",
           data: {"collegeId": "${student.sid}".substr(0, 4)},
           dataType: "json",
           type: "GET",
           success: function (data) {
             <%--alert("${student.sid}".substr(0, 3))--%>
             var target = "";
             for (var pro in data) {
               <%--alert("${student.profession}--${student.clazz}班")--%>
               <%--alert(data[pro] == ("${student.profession}--${student.clazz}班"))--%>
               if (data[pro] != ("${student.profession}--${student.clazz}班")) {
                 target += '<option value="' + pro + '">' + data[pro] + '</option>\r\n'
               }
               if (data[pro] == ("${student.profession}--${student.clazz}班")) {
                 target += '<option selected value="'+ pro +'">'+ data[pro] +'</option>\r\n'
               }
             }
             var clazz = $("#clazz");
             clazz.html(target);
             clazz.selectpicker('refresh');
             //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局，这将非常有用。
             clazz.selectpicker('render');
             // alert(target)
           }
         });
         college.append(target);
         college.selectpicker('refresh');
         //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局，这将非常有用。
         college.selectpicker('render');
         // alert(target)
       }
     })
  })


  function getProfessions() {
    var college = $("#college option:selected").val();
    // alert(college)
    if (college != "" && college != null) {
      $.ajax({
        url: "${pageContext.request.contextPath}/info/getProfessions",
        data: {"collegeId": college},
        dataType: "json",
        type: "GET",
        success: function (data) {
          var target = "";
          for (var pro in data) {
            <%--alert("${student.profession}--${student.clazz}班")--%>
            <%--alert(data[pro] == ("${student.profession}--${student.clazz}班"))--%>
            if (data[pro] != ("${student.profession}--${student.clazz}班")) {
              target += '<option value="' + pro + '">' + data[pro] + '</option>\r\n'
            }
            if (data[pro] == ("${student.profession}--${student.clazz}班")) {
              target += '<option selected value="'+ pro +'">'+ data[pro] +'</option>\r\n'
            }
          }
          var clazz = $("#clazz");
          clazz.html(target);
          clazz.selectpicker('refresh');
          //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局，这将非常有用。
          clazz.selectpicker('render');
          // alert(target)
          }
        });
      }


    }

</script>



</body>
</html>